/* 自定义网格系统 */
.custom-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--row-horizontal-gutter, 0px));
  margin-right: calc(-1 * var(--row-horizontal-gutter, 0px));
  row-gap: calc(var(--row-vertical-gutter, 0px) * 2);
}

.custom-col {
  flex: 0 0 auto;
  padding-left: var(--row-horizontal-gutter, 0px);
  padding-right: var(--row-horizontal-gutter, 0px);
  position: relative;
}

/* 24栅格系统 - 超小屏幕 (xs) */
.custom-col-xs-1 { width: 4.16666667%; }
.custom-col-xs-2 { width: 8.33333333%; }
.custom-col-xs-3 { width: 12.5%; }
.custom-col-xs-4 { width: 16.66666667%; }
.custom-col-xs-5 { width: 20.83333333%; }
.custom-col-xs-6 { width: 25%; }
.custom-col-xs-7 { width: 29.16666667%; }
.custom-col-xs-8 { width: 33.33333333%; }
.custom-col-xs-9 { width: 37.5%; }
.custom-col-xs-10 { width: 41.66666667%; }
.custom-col-xs-11 { width: 45.83333333%; }
.custom-col-xs-12 { width: 50%; }
.custom-col-xs-13 { width: 54.16666667%; }
.custom-col-xs-14 { width: 58.33333333%; }
.custom-col-xs-15 { width: 62.5%; }
.custom-col-xs-16 { width: 66.66666667%; }
.custom-col-xs-17 { width: 70.83333333%; }
.custom-col-xs-18 { width: 75%; }
.custom-col-xs-19 { width: 79.16666667%; }
.custom-col-xs-20 { width: 83.33333333%; }
.custom-col-xs-21 { width: 87.5%; }
.custom-col-xs-22 { width: 91.66666667%; }
.custom-col-xs-23 { width: 95.83333333%; }
.custom-col-xs-24 { width: 100%; }

/* 小屏幕 (sm) ≥576px */
@media (min-width: 576px) {
  .custom-col-sm-1 { width: 4.16666667%; }
  .custom-col-sm-2 { width: 8.33333333%; }
  .custom-col-sm-3 { width: 12.5%; }
  .custom-col-sm-4 { width: 16.66666667%; }
  .custom-col-sm-5 { width: 20.83333333%; }
  .custom-col-sm-6 { width: 25%; }
  .custom-col-sm-7 { width: 29.16666667%; }
  .custom-col-sm-8 { width: 33.33333333%; }
  .custom-col-sm-9 { width: 37.5%; }
  .custom-col-sm-10 { width: 41.66666667%; }
  .custom-col-sm-11 { width: 45.83333333%; }
  .custom-col-sm-12 { width: 50%; }
  .custom-col-sm-13 { width: 54.16666667%; }
  .custom-col-sm-14 { width: 58.33333333%; }
  .custom-col-sm-15 { width: 62.5%; }
  .custom-col-sm-16 { width: 66.66666667%; }
  .custom-col-sm-17 { width: 70.83333333%; }
  .custom-col-sm-18 { width: 75%; }
  .custom-col-sm-19 { width: 79.16666667%; }
  .custom-col-sm-20 { width: 83.33333333%; }
  .custom-col-sm-21 { width: 87.5%; }
  .custom-col-sm-22 { width: 91.66666667%; }
  .custom-col-sm-23 { width: 95.83333333%; }
  .custom-col-sm-24 { width: 100%; }
}

/* 中等屏幕 (md) ≥768px */
@media (min-width: 768px) {
  .custom-col-md-1 { width: 4.16666667%; }
  .custom-col-md-2 { width: 8.33333333%; }
  .custom-col-md-3 { width: 12.5%; }
  .custom-col-md-4 { width: 16.66666667%; }
  .custom-col-md-5 { width: 20.83333333%; }
  .custom-col-md-6 { width: 25%; }
  .custom-col-md-7 { width: 29.16666667%; }
  .custom-col-md-8 { width: 33.33333333%; }
  .custom-col-md-9 { width: 37.5%; }
  .custom-col-md-10 { width: 41.66666667%; }
  .custom-col-md-11 { width: 45.83333333%; }
  .custom-col-md-12 { width: 50%; }
  .custom-col-md-13 { width: 54.16666667%; }
  .custom-col-md-14 { width: 58.33333333%; }
  .custom-col-md-15 { width: 62.5%; }
  .custom-col-md-16 { width: 66.66666667%; }
  .custom-col-md-17 { width: 70.83333333%; }
  .custom-col-md-18 { width: 75%; }
  .custom-col-md-19 { width: 79.16666667%; }
  .custom-col-md-20 { width: 83.33333333%; }
  .custom-col-md-21 { width: 87.5%; }
  .custom-col-md-22 { width: 91.66666667%; }
  .custom-col-md-23 { width: 95.83333333%; }
  .custom-col-md-24 { width: 100%; }
}

/* 大屏幕 (lg) ≥992px */
@media (min-width: 992px) {
  .custom-col-lg-1 { width: 4.16666667%; }
  .custom-col-lg-2 { width: 8.33333333%; }
  .custom-col-lg-3 { width: 12.5%; }
  .custom-col-lg-4 { width: 16.66666667%; }
  .custom-col-lg-5 { width: 20.83333333%; }
  .custom-col-lg-6 { width: 25%; }
  .custom-col-lg-7 { width: 29.16666667%; }
  .custom-col-lg-8 { width: 33.33333333%; }
  .custom-col-lg-9 { width: 37.5%; }
  .custom-col-lg-10 { width: 41.66666667%; }
  .custom-col-lg-11 { width: 45.83333333%; }
  .custom-col-lg-12 { width: 50%; }
  .custom-col-lg-13 { width: 54.16666667%; }
  .custom-col-lg-14 { width: 58.33333333%; }
  .custom-col-lg-15 { width: 62.5%; }
  .custom-col-lg-16 { width: 66.66666667%; }
  .custom-col-lg-17 { width: 70.83333333%; }
  .custom-col-lg-18 { width: 75%; }
  .custom-col-lg-19 { width: 79.16666667%; }
  .custom-col-lg-20 { width: 83.33333333%; }
  .custom-col-lg-21 { width: 87.5%; }
  .custom-col-lg-22 { width: 91.66666667%; }
  .custom-col-lg-23 { width: 95.83333333%; }
  .custom-col-lg-24 { width: 100%; }
}

/* 超大屏幕 (xl) ≥1200px */
@media (min-width: 1200px) {
  .custom-col-xl-1 { width: 4.16666667%; }
  .custom-col-xl-2 { width: 8.33333333%; }
  .custom-col-xl-3 { width: 12.5%; }
  .custom-col-xl-4 { width: 16.66666667%; }
  .custom-col-xl-5 { width: 20.83333333%; }
  .custom-col-xl-6 { width: 25%; }
  .custom-col-xl-7 { width: 29.16666667%; }
  .custom-col-xl-8 { width: 33.33333333%; }
  .custom-col-xl-9 { width: 37.5%; }
  .custom-col-xl-10 { width: 41.66666667%; }
  .custom-col-xl-11 { width: 45.83333333%; }
  .custom-col-xl-12 { width: 50%; }
  .custom-col-xl-13 { width: 54.16666667%; }
  .custom-col-xl-14 { width: 58.33333333%; }
  .custom-col-xl-15 { width: 62.5%; }
  .custom-col-xl-16 { width: 66.66666667%; }
  .custom-col-xl-17 { width: 70.83333333%; }
  .custom-col-xl-18 { width: 75%; }
  .custom-col-xl-19 { width: 79.16666667%; }
  .custom-col-xl-20 { width: 83.33333333%; }
  .custom-col-xl-21 { width: 87.5%; }
  .custom-col-xl-22 { width: 91.66666667%; }
  .custom-col-xl-23 { width: 95.83333333%; }
  .custom-col-xl-24 { width: 100%; }
} 